import { NextMeshInputWidget } from '@app-nextmesh-env/nextmesh/components/Widgets';
import { AddButton } from '@app-nextmesh-env/nextmesh/components';
import SwitchToggle from '@app-nextmesh-env/nextmesh/components/Forms/components/SwitchToggle';
import DeleteIcon from '@mui/icons-material/Delete';
import {
  Box,
  Collapse,
  IconButton,
  List,
  ListItem,
  Stack,
} from '@mui/material';
import { useRef, useState } from 'react';

export default function FormulaList({
  formulas,
  disabled,
  addable,
  deletable,
  onChange,
}: {
  formulas: string[];
  disabled: boolean;
  addable?: boolean;
  deletable?: boolean;
  onChange: (value: string[]) => void;
}) {
  const [collapsed, setCollapsed] = useState(false);
  const listRef = useRef(null);
  return (
    <>
      <Box sx={{ mt: 1 }}>
        <Box
          sx={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
          }}>
          <Stack
            sx={{ width: '100%', cursor: 'pointer' }}
            direction='row'
            alignItems='center'
            onClick={() => setCollapsed((c) => !c)}>
            <SwitchToggle toggle={collapsed} />
            <label
              style={{
                cursor: 'pointer',
                fontWeight: 'bold',
                marginLeft: '5px',
              }}>
              {'表达式'}
            </label>
          </Stack>
          {addable && (
            <AddButton
              disabled={disabled}
              style={{}}
              key={formulas.length}
              onClick={() => {
                onChange([...formulas, '']);
                // TODO 优化，在添加并渲染结束之后，滚动到最底部
                setTimeout(() => {
                  listRef.current.scrollTo({
                    top: listRef.current.scrollHeight,
                    behavior: 'smooth',
                  });
                }, 100);
              }}
            />
          )}
        </Box>
        <Collapse
          in={!collapsed}
          sx={{ pl: '14px' }}>
          <List
            ref={listRef}
            sx={{ maxHeight: '200px', overflow: 'auto' }}>
            {formulas.map((value, index) => {
              return (
                <ListItem
                  key={index}
                  disablePadding>
                  <Stack
                    sx={{ width: '90%' }}
                    direction={'row'}
                    justifyContent='space-between'
                    alignItems='center'>
                    <NextMeshInputWidget
                      disabled={disabled}
                      value={value}
                      placeholder='请输入表达式'
                      onChange={(value) => {
                        formulas[index] = value;
                        onChange([...formulas]);
                      }}
                    />
                    {deletable && (
                      <IconButton
                        disabled={disabled}
                        edge='end'
                        aria-label='delete'
                        onClick={() => {
                          onChange([
                            ...formulas.slice(0, index),
                            ...formulas.slice(index + 1),
                          ]);
                        }}>
                        <DeleteIcon />
                      </IconButton>
                    )}
                  </Stack>
                </ListItem>
              );
            })}
          </List>
        </Collapse>
      </Box>
    </>
  );
}
